<!--集群 绘制图形-->
<!--Cluster-->
<template>
  <div>
    <div id="map" class="mapC"></div>
    <div class="select_c">
      <div class="block">
        <span class="demonstration">集群距离</span>
        <el-slider @change="changeV1" v-model="value1"></el-slider>
      </div>
      <div class="block">
        <span class="demonstration">最小距离</span>
        <el-slider @change="changeV2" v-model="value2"></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Map from 'ol/Map'
import Point from 'ol/geom/Point'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style,
  Text
} from 'ol/style'
// import Tile from 'ol/layer/Tile'
import {Cluster, Vector as VectorSource} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      value1: 30,
      value2: 40,
      map: null,
      raster: null,
      source: null,
      clusterSource: null,
      clusters: null,
      draw: null,
      dblClickInteraction: null,
      drawSoruceVectorLayer: null,
      vector: null
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initMap () {
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.map = new Map({
        layers: [this.raster, raster2, this.clusters],
        target: 'map',
        view: new View({
          // center: [108.2, 29.07],
          center: [0, 0],
          zoom: 4
          // projection: 'EPSG:4326'
        })
      })
    },
    initData () {
      const count = 20000
      const features = new Array(count)
      const e = 4500000
      for (let i = 0; i < count; ++i) {
        const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]
        features[i] = new Feature(new Point(coordinates))
      }

      this.source = new VectorSource({
        features: features
      })
      console.log(features, 'features')
      this.clusterSource = new Cluster({
        distance: parseInt(this.value1, 10),
        minDistance: parseInt(this.value2, 10),
        source: this.source
      })
      const styleCache = {}
      this.clusters = new VectorLayer({
        source: this.clusterSource,
        style: function (feature) {
          const size = feature.get('features').length
          let style = styleCache[size]
          if (!style) {
            style = new Style({
              image: new CircleStyle({
                radius: 10,
                stroke: new Stroke({
                  color: '#fff'
                }),
                fill: new Fill({
                  color: '#3399CC'
                })
              }),
              text: new Text({
                text: size.toString(),
                fill: new Fill({
                  color: '#fff'
                })
              })
            })
            styleCache[size] = style
          }
          return style
        }
      })
      this.initMap()
    },
    changeV2 (val) {
      this.clusterSource.setDistance(parseInt(val, 10))
    },
    changeV1 (val) {
      this.clusterSource.setMinDistance(parseInt(val, 10))
    },
    getdrawD (value) {

    }
    // }
  }
}
</script>

<style scoped>
  .mapC{
    width: 100vw;
    height: 100vh;
  }
  .select_c{
    width: 20vw;
    position: absolute;
    top: 0;
    left: 200px;
  }
  .demonstration{
    font-size: 15px;
  }
</style>
